<template>
	<el-row style="min-height:92vh;"  class = "bg rounded-3xl m-8">
		<el-col :lg="16" :md="12" class="flex items-center justify-center">
			<div v-if="!register.reg">
				<div class = "font-bold text-light-50 text-6xl mb-4">欢迎光临</div>
				<div class=" text-gray-200 text-sm">家庭医生健康管理平台是基于创新模式下的“互联网+健康大数据”平台。</div>
				<el-button class="button" @click="Register">点击注册</el-button>
			</div>
			<div v-if="register.reg" class="rg">
				<!--账户密码注册-->
				<div v-if="!register.isERcodeLogin" class="reg-r">
					<div class="code mr-3">
						<div class = "font-bold text-light-50 text-2xl mb-4">账 户 密 码 注 册</div>
						<div class="myLogin">
							<el-form ref="formRef" :rules="rules" :model="form" class="w-[270px]">
								<!-- 用户名 -->
								<el-form-item prop="rg_username">
									<el-input v-model="form.username" placeholder="请输入用户名">
										<template #prefix>
											<el-icon class="el-input__icon"><user/></el-icon>
										</template>
									</el-input>
								</el-form-item>
								<!-- 输入密码 -->
								<el-form-item prop="password">
									<el-input v-model="form.password" placeholder="请输入密码" type="password" show-password>
										<template #prefix>
											<el-icon class="el-input__icon"><Lock /></el-icon>
										</template>
									</el-input>
								</el-form-item>
								<!-- 确认密码 -->
								<el-form-item prop="password">
									<el-input v-model="form.password" placeholder="请确认密码" type="password" show-password>
										<template #prefix>
											<el-icon class="el-input__icon"><Lock /></el-icon>
										</template>
									</el-input>
								</el-form-item>
								<!--注册按钮-->
								<el-form-item>
									<el-button class="lg-btn w-[220px] text-light-50 mb-1 ml-4" @click="submitRg">注册</el-button>
								</el-form-item>
							</el-form>
						</div>
						<el-button type="primary" class="button" @click="Return">返回</el-button>
					</div>
					<!--唤醒二维码注册/登录(右)-->
					<div class="right ml-3">
						<el-tooltip
							class="box-item"
							effect="dark"
							content="扫描二维码"
							placement="right-start"
						>
							<el-button class="right" @click="weakupCode">></el-button>
						</el-tooltip>
					</div>
				</div>
				<!--唤醒注册/登录功能(左)-->
				<div v-if="register.isERcodeLogin" class="reg-r">
					<div class="left mr-3">
						<el-tooltip
							class="box-item"
							effect="dark"
							content="账户密码注册"
							placement="left-start"
						>
						<el-button class="left" @click="weakupCode"></el-button>
						</el-tooltip>
					</div>
					<!-- 二维码注册/登录 -->
					<div class="code" ml-3>
						<div class = "font-bold text-light-50 text-2xl mb-4">扫 码 登 录</div>
						<div class = "ERcode">二维码</div>
						<el-button type="primary" class="button" @click="Return">返回</el-button>
					</div>
				</div>
				
			</div>
		</el-col>

		<el-col :lg="8" :md="12" class="bg-right flex items-center justify-center flex-col rounded-r-3xl">
			<h2 class=" text-3xl font-bold text-dark-700">家庭医生健康管理系统</h2>
			<div class="flex justify-center items-center my-5 text-dark-700 space-x-2">
				<span class="h-[1px] w-16 bg-gray-500"></span>
				<span>账号密码登录</span>
				<span class="h-[1px] w-16 bg-gray-500"></span>
			</div>

		<div class="myLogin mt-[40px]">
			<el-form ref="formRef" :rules = "rules" :model="form" class="w-[270px]">
				<el-form-item prop="username"><!--加名称可以使用label=""-->
					<div class="owl" id="owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<el-input v-model="form.username" placeholder="请输入用户名" >
						<template #prefix>
							<el-icon class="el-input__icon"><user/></el-icon>
						</template>
					</el-input>
				</el-form-item>

				<el-form-item prop="password">
					<el-input 
						@blur="inputBlur"
						@focus="inputFocus"
						v-model="form.password" 
						placeholder="请输入密码" 
						type="password" show-password>
						<template #prefix>
							<el-icon class="el-input__icon"><Lock /></el-icon>
						</template>
					</el-input>
				</el-form-item>

				<el-select-v2
					v-model="value"
					:options="options"
					placeholder="请选择登录角色"
					@change="handleChange"
					class="w-[270px]"
				/>

				<el-form-item>
					<el-button color="#409EFF" class="lg-btn w-[270px] text-light-50 m-4"  @click="onSubmit()">登 录</el-button>	
				</el-form-item>
			</el-form>
		</div>
		</el-col>
	</el-row>
</template>

<script setup>
import { ref,reactive } from 'vue'
import { loginApi,getMessage,getDoctorInfo, getUserInfo,getMsgNum } from '../api/manager.js'
import { ElMessage, ElNotification } from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
import { useGlobleStore } from '../store/globle'
import store from '../store/store'

const router = useRouter()
const use = useRoute()
const form = reactive({username:'',password:'',type:use.query.type})
const register = reactive({reg:false,isERcodeLogin:false,})
const options = [{value:0,label:'管理员'},{value:1,label:'用户'},{value:2,label:'医生'}]
const globle = useGlobleStore()
let tmptype = localStorage.getItem("ms_type");
const value = ref(form.type==null?(tmptype==null?options[1].label:options[tmptype].label):options[form.type].label);

//角色选择
const handleChange = (value) => {
	//console.log(value)
	form.type = value
}

function onSubmit(){
	formRef.value.validate((valid)=> {
		if(!valid)return false;
		loginApi(form).then(res=>{
			if(res.code == 504){
				ElNotification({
					message: '登录失败：请输入正确的用户名和密码！或者检查您登录角色！',
					type: 'error',
					duration:2000,
				})
				router.push('/Login')
			}
			else if(res.code == 509){
				ElNotification({
					message: '登录失败：密码错误！',
					type: 'error',
					duration:2000,
				})
			}else if(res.code == 200){
				ElNotification({
					message: '登录成功',
					type: 'success',
					duration:2000,
				})
				getMsgNum().then(res=>{
					//console.log("res:",res)
					if(res.code == 200){
						//console.log("111=>")
						globle.setMsgNum(res.data)
						store.dispatch('asyncupdateIOTMsgConfig',res.data)
					}
				}).catch(error=>{
					console.log("err=>",err)
				})
				if(form.type == 0){//管理员
					router.push({path:'/ManagerMain',query:form.username})
				}else if(form.type == 1){//用户
					getUserInfo().then(res=>{
						if(res.code==200){
							globle.setAvater(res.data.customer.avatar)
    						store.dispatch('asyncupdateIOTTagConfig',res.data.customer.avatar)
						}
					}).catch(err=>{
						ElMessage.error('请求错误，请检查网络！')
					})
					router.push({path:'/UserMain',query:form.username})
				}else{//医生
					getDoctorInfo().then(res=>{
						if(res.code==200){
							globle.setAvater(res.data.avatar)
    						store.dispatch('asyncupdateIOTTagConfig',res.data.avatar)
						}
					}).catch(err=>{
						ElMessage.error('请求错误，请检查网络！')
					})
					router.push({path:'/MainContainer',query:form.username})
				}
				//全局存储
				globle.storeUsrname(form.username)
				globle.storeUsrtype(form.type)
				//保存token
				sessionStorage.setItem("token",true)
				sessionStorage.setItem("ms_username",form.username)
				//获取消息数目，并存储
				getMessage().then(res=>{
					for(var data in res.data){
						if(data.status == "0") globle.addMsg();
					}
				}).catch(err=>{
					console.log("err:",err)
				})
			}else{
				//其他错误，待补充
				ElNotification({
					message: '登录失败',
					type: 'error',
					duration:5000,
				})
			}
		})
		.catch( err=>{
			console.log("登录失败:" ,err)
			var message = '登录失败'
			if(err.message != null)message += ":" + err.message
			ElNotification({
				message: message,
				type: 'error',
				duration:5000,
			})
		})
	})
	
}

const formRef = ref(null);

const rules = {
	username:[
		{
			required:true,
			message:'用户名不能为空',
			trigger:'blur'
		}
	],
	password:[
		{
			required:true,
			message:'密码不能为空',
			trigger:'blur'
		}
	],
}

const inputBlur = () =>{
	document.getElementById('owl').classList.remove('psw')
}

const inputFocus = () => {
	document.getElementById('owl').classList.add('psw')
}

const weakupCode = () =>{
	register.isERcodeLogin=!register.isERcodeLogin;
}

const weakupUsername = () =>{

}

function Register(){
	register.reg = true
}

function Return(){
	register.reg = false
}

</script>

<style scoped>
	.reg-r{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.right{
		display: flex;
		width: 40px;
		height: 40px;
		border-radius: 100px;
		justify-content: center;
		align-items: center;
		background: transparent;
		color: rgb(27, 118, 193);
		font-size: 24px;	
		border:1px solid rgba(255,255,255,0.4);
		border-right: 1px solid rgba(255,255,255,0.2);
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}
	.right:hover{
		background: transparent;
	}

	.left{
		content: "<";
		display: flex;
		width: 40px;
		height: 40px;
		border-radius: 100px;
		justify-content: center;
		align-items: center;
		background: transparent;
		color: rgb(27, 118, 193);
		font-size: 24px;	
		border:1px solid rgba(255,255,255,0.4);
		border-right: 1px solid rgba(255,255,255,0.2);
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}

	.left:hover{
		background: transparent;
	}

	.bg{
		background-image: linear-gradient(120deg,#3498db,#8e44ad);
	}

	.bg-right{
		background-image: linear-gradient(60deg,#c59cd7,#e3eeff);
	}
	.button{
		width:170px;
		border-radius: 7px;
		background-image: linear-gradient(to right,#02aab0 0%,#00cdac 50%,#02aab0 100%);
		background-size: 200% auto;
		color: #fff;
		outline: none;
		cursor: pointer;
		box-shadow: 0 20px 40px rgba(0,0,0,0.1);
		margin-top:20px;
	}
	.code{
		display: flex;
		flex-direction: column;
		position: relative;
		justify-content: center;
		align-items: center;
	}
	.ERcode{
		width:250px;
		height: 250px;
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		border: 5px #00cdac;
		border-radius: 10px;
		background-color: #fff;
	}
	.myLogin{
		z-index: 3;
		width: 320px;
		height: 225px;
		/* background-color: rgba(255,255,255,1); */
		/* margin-top: 40px; */
		padding: 25px 25px;
		border-radius: 8px;
		box-shadow: 0 20px 40px rgba(0,0,0,0.1);
		border: 1px solid rgba(255,255,255,0.2);
		border-right: 1px solid rgba(255,255,255,0.1) ;
		border-bottom: 1px solid rgba(255,255,255,0.1);
		backdrop-filter: blur(20px);
	}
	.lg-btn{
		position: relative;
		line-height: 100px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 18px;
		border: none;
		color: #fff;
		/* 渐变背景 */
		background-image: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
		/* 背景渐变色大小 */
		background-size: 400%;
		/* 圆角 */
		border-radius: 11px;
		z-index: 3;
		animation: streamer 8s infinite;
	}
	.lg-btn::before{
		position: absolute;
		top: -5px;
		left: -5px;
		bottom: -5px;
		right: -5px;
		/* 渐变背景 */
		background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
		/* 背景渐变色大小 */
		background-size: 400%;
		/* 圆角 */
		border-radius: 11px;
		/* 位于按钮之下 */
		z-index: -1;
		/* 设置模糊度 显示发光效果 */
		filter: blur(20px);
	}

	@keyframes streamer{
		100%{
			/* 背景位置 */
			background-position: -400% 0;
		}
	}

	.owl{
		width: 169px;
		height: 86px;
		/* 背景图片 */
		background: url("../assets/img/owl-login.png") no-repeat;
		/* 绝对定位 */
		position: absolute;
		top: -86px;
		/* 水平居中 */
		left: 40%;
		transform: translateX(-50%);
	}
	.owl .hand{
		width: 34px;
		height: 34px;
		border-radius: 40px;
		background-color: #472d20;
		/* 绝对定位 */
		position: absolute;
		left: 12px;
		bottom: -8px;
		/* 沿Y轴缩放0.6倍（压扁） */
		transform: scaleY(0.6);
		/* 动画过渡 */
		transition: 0.3s ease-out;
	}
	.owl .hand.hand-r{
		left: 170px;
	}
	.owl.psw .hand{
		transform: translateX(50px) translateY(-8px) scale(0.7);
	}
	.owl.psw .hand.hand-r{
		transform: translateX(-50px) translateY(-8px) scale(0.7);
	}
	.owl .arms{
		position: absolute;
		top: 58px;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}
	.owl .arms .arm{
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background: url("../assets/img/owl-login-arm.png") no-repeat;
		transform: rotate(-20deg);
		transition: 0.3s ease-out;
	}
	.owl .arms .arm.arm-r{
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}
	.owl.psw .arms .arm{
		transform: translateY(-40px) translateX(40px);
	}
	.owl.psw .arms .arm.arm-r{
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}

</style>
